今天我們要來介紹Bootsrap，那這是甚麼呢 ?他是一種框架(frame)，在他所制定的規則裡，能快速讓使用者開發出網頁，

首先我們先到Bootstrap的網站，然後按下Get start。
往下滑以後就會看到我們剛開始的樣本!

將他copy起來複製到你的html檔案裡。你一開始的框架設定就完成囉!是不是十分快速。

Bootstrap左邊有非常多的範例選項，教學怎麼使用這些套件，有時間的話非常推薦大家去了解跟練習。

而今天我們要教學利用Bootstrap快速製作一個三欄到四欄的版面。我們需要先認識Grid。

Grid

Grid就是我們的網格系統，其實就是我們之前所學到的flex，Bootstrap的網格系統就是使用容器的概念把行、欄佈局與對齊。

我們要認識新的屬性。以及他的作用為何?

• Containers: 最外層的容器(固定寬度)，若是要滿版的話使用 .container-fluid。
• Rows: 水平排列整齊成一行。確保所有欄在行上排好。
• 欄包含水平的 padding，以產生單個欄之間的溝槽，但是你可以通過 .row 上的 .no-gutters 從行中移除邊緣 margin，從欄中移除填充 padding。

想像一下每一行的大小都是12，你的欄位數可以自由分配這12個大小。

例如:
你有三欄，你想要他們都一樣大、就可以在.col設置4、4、4。
若是你希望中間的寬度比較大，就可以在.col設置3、6、6。

到這裡可能還是有些模糊，就讓我們實際看看例子!

例子: 三欄排版

首先要記得把Bootstrap的框架複製過來，不然是沒有效果的喔!

1. 先建立一個外容器countainer
2. 建立水平列群組row
3. 建立三欄內容.col*3
4. 把內容img跟段落p放到col裡面
5. 圖片設成滿版，加上class="img-fluid"，設定CSS .col img為圖片寬度100%。

    .col img{
        width: 100%;
    }
        
        
    <div class="container">
        <div class="row">
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=1" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=2" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
            <div class="col-4">
                <img src="https://picsum.photos/300/200?random=3" alt=""   class="img-fluid">
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt nisi nemo, autem quas soluta dignissimos rerum dolorum reiciendis voluptatem fugit corrupti dolorem ullam necessitatibus. Saepe expedita harum iure unde magnam?
                </p>
            </div>
        </div>
    </div>

這樣是不是超快速又超級輕鬆呢!那今天Bootstrap的介紹就到這囉。